﻿
<!DOCTYPE html>
<html lang="en">
<head>
    <title>无锡所小气候站</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../assets/layui/css/layui.css">
    <link rel="stylesheet" href="../css/plugins/select-multiple.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/plugins/plugin-condition.css">
</head>
<style type="text/css">
    .layui-form-labe{
        width: 1300xp;
    }

</style>
<body>

<br>
<!-- 搜索栏目开始-->
<form  class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">作物类型</label>
            <div class="layui-input-block">
                <!--<input type="text" id="companyName1" name="companyName" lay-verify="title" autocomplete="off" placeholder="请输入企业名称" class="layui-input">-->
                <select name="crop" id="crop" >
                    <option value="">不限</option>
                    <option value="粮">粮</option>
                    <option value="果">果</option>
                    <option value="茶">茶</option>
                    <option value="菜">菜</option>
                    <option value="设施农业">设施农业</option>
                </select>
            </div>
        </div>
        <button class="layui-btn layui-btn-sm"  lay-submit="" lay-filter="demo1">搜索</button>
    </div>
</form>

<!-- 搜索栏目结束-->

<!-- 表格开始-->
<table id="farmstabae" lay-filter="barDemo"></table>
<script type="text/html" id="barDemo">
    <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>-->
    <!--&lt;!&ndash; <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
    <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> &ndash;&gt;-->
</script>
<!-- 表格开始-->

<!-- 弹出层  -->
<div id="ckuserSub" style="display: none">
    <form  class="layui-form" action="">
        <input type="hidden" id="id" name="id" >
        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">所属市</label>
                <div class="layui-input-block">
                    <input type="text" id="city" name="city" lay-verify="title" autocomplete="off" placeholder="" class="layui-input" disabled="disabled">
                </div>
            </div>

        </div>
        <!--<div  class="layui-inline" style="float:right;left:-20px;">-->
        <!--&lt;!&ndash; <button class="layui-btn layui-btn-sm" id="xganniu" lay-submit=""  lay-filter="xgusersj">修改</button> &ndash;&gt;-->
        <!--&lt;!&ndash; <button class="layui-btn layui-btn-sm" id="tjanniu" lay-submit=""  lay-filter="saveusersj">添加</button> &ndash;&gt;-->
        <!--</div>-->
    </form>
</div>
<script type="text/javascript" src="../assets/jquery/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../assets/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    var datas=[];
    layui.use('table', function(){
        var crop= $('#croptype option:selected').val();
        $.ajax({
            //后台查询面板
            url: "http://10.172.13.58:8088/ylsmsapi/getMicroclimateStations?company=%E6%97%A0%E9%94%A1",
            type: 'get',
            dataType: 'json',
            // data: {
            //     "crop": $('#croptype option:selected').val()
            // },
            success: function (res) {
                datas=res.obj;
                var table = layui.table;
                table.render({
                    elem: '#farmstabae'
                    ,id:'idTest'
                    ,skin: 'row'							//皮肤，无上下边框
                    ,even: true
                    ,width: 1100
                    ,height: 500//皮肤，开启隔行显示
                    ,page: true //开启分页
                    ,limit:50
                    ,limits:[50,200,300,400]
                    ,data: datas
                    ,cols: [[ //表头
                        {type:'checkbox',fixed: 'left'}
                        ,{field: 'stationid', title: '站号', width:80}
                        ,{field: 'longitude', title: '经度', width:120}
                        ,{field: 'latitude', title: '纬度', width:120}
                        ,{field: 'area', title: '区域名称', width:120}
                        ,{field: 'states', title: '状态', width:120}
                        ,{field: 'stationname', title: '站名', width:120}
                        ,{field: 'stationaddress', title: '小气候站地址', width:120}
                        ,{field: 'croptype', title: '作物类型', width:120}
                        ,{field: 'note', title: '描述）', width:120}
//                        ,{field: 'right', width:178, align:'center', toolbar: '#barDemo'}
                    ]]
                });
            },
            error: function (e) {
                console.log(e);
            }
        });
    })

    layui.use('table', function(){
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(farmstabae)', function(obj){
            console.log(obj)
        });

        //监听工具条
        table.on('tool(barDemo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){//查看
                $("#xganniu").hide();
                jzbjsrk();
                ckuserxx(data);
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    ajaxdy("delAgrById?id="+JSON.stringify(data.id));
                    obj.del();
                    layer.close(index);
                });
            }else if(obj.event === 'edit'){
                $("#xganniu").show();
                bjsrk();
                ckuserxx(data);
            }
        });


        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

    layui.use(['form', 'layedit', 'laydate'], function(){
        //监听查询提交
       
        layui.form.on('submit(demo1)', function(data){
            // reload(data);
 var crop= $('#crop option:selected').val();
            $.ajax({
                //后台查询面板
                url: "http://10.172.13.58:8088/ylsmsapi/getMicroclimateStations?company=%E6%97%A0%E9%94%A1&crop="+crop,
                type: 'get',
                dataType: 'json',
                // data: {
                //     "crop": $('#croptype option:selected').val()
                // },
                success: function (res) {
                    datas=res.obj;
                    var table = layui.table;
                    table.render({
                        elem: '#farmstabae'
                        ,id:'idTest'
                        ,skin: 'row'							//皮肤，无上下边框
                        ,even: true
                        ,width: 1100
                        ,height: 500//皮肤，开启隔行显示
                        ,page: true //开启分页
                        ,limit:50
                        ,limits:[50,200,300,400]
                        ,data: datas
                        ,cols: [[ //表头
                            {type:'checkbox',fixed: 'left'}
                            ,{field: 'stationid', title: '站号', width:80}
                            ,{field: 'longitude', title: '经度', width:120}
                            ,{field: 'latitude', title: '纬度', width:120}
                            ,{field: 'area', title: '区域名称', width:120}
                            ,{field: 'states', title: '状态', width:120}
                            ,{field: 'stationname', title: '站名', width:120}
                            ,{field: 'stationaddress', title: '小气候站地址', width:120}
                            ,{field: 'croptype', title: '作物类型', width:120}
                            ,{field: 'note', title: '描述）', width:120}
//                        ,{field: 'right', width:178, align:'center', toolbar: '#barDemo'}
                        ]]
                    });
                },
                error: function (e) {
                    console.log(e);
                }
            });
            return false;
        });
        //监听修改提交
        layui.form.on('submit(xgusersj)', function(data){
            ajaxdy("updateAgrById","post",data.field);
            layer.closeAll();
            reload(null);
            return false;
        });
    });

    //刷新表格
    function reload (data){
        if(data != null){
            layui.table.reload('idTest', {
                url:'http://10.172.13.58:8088/ylsmsapi/getMicroclimateStations?company=%E6%97%A0%E9%94%A1'
                ,where: data.field //设定异步数据接口的额外参数
                //,height: 300
            });
        }else{
            layui.table.reload('idTest', {
                url:'http://10.172.13.58:8088/ylsmsapi/getMicroclimateStations?company=%E6%97%A0%E9%94%A1'
                //,height: 300
            });
        }
    }

    //编辑输入框
    function bjsrk(){
        $("#content").attr("disabled",false);
    }
    //禁止编辑输入框
    function jzbjsrk(){
        $("#content").attr("disabled",true);
    }
    //查看
    function ckuserxx(data){
        dataqk();
        if(data != null){
            datatc(data);
        }
        layer.open({
            type: 1,
            shade: false,
            title: '查看信息',
            area: ['950px', '560px'],
            shadeClose: true, //点击遮罩关闭
            closeBtn: 1,
            content: $('#ckuserSub'),
            end:function(){
                $("#ckuserSub").hide();
            },
        });
    }

    //弹出层数据填充
    function datatc(data){
        $("#city").val(data.city);
        $("#area").val(data.area);
        $("#companyName").val(data.companyName);
        $("#cCrop").val(data.cCrop);
        $("#mobile").val(data.mobile);
        $("#companyUser").val(data.companyUser);
        $("#sTime").val(data.sTime);
        renderForm();
    }
    //重新渲染表单
    function renderForm(){
        layui.use('form', function(){
            var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
            form.render();
        });
    }

    function ajaxdy(dyurl,typr,data){
        var fhdata = null;
        $.ajax({
            url:apidz+dyurl,
            type:typr, //GET
            async:false,  //或false,是否异步
            data:data,
            dataType:'json',
            success:function(data){
                fhdata = data;
            }, error:function(xhr,textStatus){
                layer.msg('数据访问异常！');
            }
        });
        return fhdata;
    }
    //弹出层数据清空
    function dataqk(){
        $("#city").val("");
        $("#area").val("");
        $("#companyName").val("");
        $("#mobile").val("");
        $("#cCrop").val("");
        $("#companyUser").val("");
        $("#sTime").val("");
    }

</script>

</body>

</html>